<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404页面</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html, body {
            height: 100vh;
        }

        body {
            background-color: darkcyan;
            display: flex;
            justify-content: center;
            align-items: center;
        }body {
            background-image: url('../static/img/cool-background.png');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .main-container {
            width: 80%;
            max-width: 1000px;
            max-height: 500px;
            min-width: 600px;
            background-color: white;
            font-size: 0;
            border-radius: 20px;
            box-shadow: 0 0 50px 0 rosybrown;
        }
        .main-container .container-item{
            display: inline-block;
            width: 50%;
            vertical-align: middle;
        }

        .main-container .img-container {
            background-color: burlywood;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
        .main-container .text-container .code{
            font-size: 120px;
            font-family: Arial, Helvetica, sans-serif;
            color: cyan;
            font-weight: bolder;
            text-align: center;
        }

        .main-container .text-container .message{
            font-size: 20px;
            text-align: center;
            font-weight: 200;
        }

        .main-container .text-container .action{
            font-size: 15px;
            font-weight: 200;
            text-align: center;
            text-decoration-line: underline;
            cursor: pointer;
            padding: 20px 0;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="img-container container-item">
            <img src="../static/img/404.jpeg" alt="">
        </div>
        <div class="text-container container-item">
            <div class="code">404</div>
            <div class="message">查看的页面已经飞往别的星球了呢...</div>
            <div class="action" onclick="window.location.href='/index'">返回首页</div>
        </div>
    </div>
</body>
</html>